<template>
  <!-- 二级路由:消息 -->

  <div>
    <!-- 导航区域 -->
    <!--导航区域：目前使用的是声明式导航,点击router-link目前可以从二级路由跳转三级路detail-->
    <!-- 声明式导航链接 -->
    <!--
      <ul>
      <li><router-link to="/home/message/detail?a=1&b=2">message-001</router-link></li>
      <li><router-link to="/home/message/detail/1/2">message-002</router-link></li>
      <li><router-link to="/home/message/detail/66/99?a=000&b=888">message-003</router-link></li> 
    </ul>-->
     <!--编程式导航:任意标签都可以当中导航链接-->
     <button v-for="item in arr" :key="item.id" @click="goDetail(item)">{{item.name}}</button>
    <!-- 展示区域:三级路由显示的地方 -->
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      arr: [
        { id: 1, name: "烤鸡", age: 1000 },
        { id: 2, name: "烤鸭", age: 2000 },
        { id: 3, name: "考大鹅", age: 300 },
      ],
    };
  },
  methods: {
     goDetail(item){
         //点击的时候如果实现路由的跳转那？VC属性$router[路由器属性]->push|replace方法实现路由的跳转
         //编程式导航写法:三种 
         //第一种字符串写法-----不用
         //第二种模板字符串写法----不用
        //  this.$router.push('/home/message/detail?a=1&b=2');
        //  this.$router.push("/home/message/detail/1/2");
        //  this.$router.push(`/home/message/detail/1/2?a=1&b=1`);

        //第三种写法:对象写法[配置对象],设置跳转过去路由   query:路由跳转过去携带的query参数
        // this.$router.push({path:'/home/message/detail',query:{a:item.name,b:item.age}})  //query参数
        //传递参数：两个P'犯冲'---不行
        //this.$router.push({name:'erha',params:{a:item.name,b:item.age}});//params---配置路由需要占位
        //this.$router.push({name:'erha',params:{a:item.name,b:item.age},query:{a:'xxx',b:'yyy'}});//query+params参数


         this.$router.replace({name:'erha',params:{a:item.name,b:item.age}});

         //push|replace区别?
         //相同点:都可以实现路由的跳转与传递参数
         //不同点:push能记录历史记录 replace不能记录历史记录

   
     }
  },
};
</script>

<style scoped>
</style>
